<div class="p-3">
  <div class="card mb-3">
    <div class="card-header">Form elements</div>
    <div class="card-body form-horizontal">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Rounded</label>
        <div class="col-sm-10">
          <input class="form-control rounded">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">With help</label>
        <div class="col-sm-10">
          <input class="form-control">
          <span class="text-grey">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Line</label>
        <div class="col-sm-10">
          <input class="form-control form-control-line" placeholder="Input line">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="input-id-1">Label focus</label>
        <div class="col-sm-10">
          <input class="form-control" id="input-id-1">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
          <input type="password" name="password" class="form-control">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Placeholder</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="placeholder">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-lg-2 col-form-label">Disabled</label>
        <div class="col-lg-10">
          <input class="form-control" placeholder="Disabled input here..." disabled>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-lg-2 col-form-label">Static control</label>
        <div class="col-lg-10">
          <p class="form-control-static">email@example.com</p>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Checkboxes and radios</label>
        <div class="col-sm-10">
          <label class="d-block"><input type="checkbox"> Option one is this and that&mdash;be sure to include why it's great</label>
          <label class="d-block"><input type="radio" name="optionsRadios" value="1" checked> Option one is this and that&mdash;be sure to include why it's great</label>
          <label class="d-block"><input type="radio" name="optionsRadios" value="2"> Option two can be something else and selecting it will deselect option one</label>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Inline checkboxes</label>
        <div class="col-sm-10">
          <label class="d-inline-block mr-2"><input type="checkbox"> A </label>
          <label class="d-inline-block mr-2"><input type="checkbox"> B </label>
          <label class="d-inline-block mr-2"><input type="checkbox"> C </label>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">CSS3 Checkboxes & radios</label>
        <div class="col-sm-10">
          <label class="ui-checkbox d-block"><input type="checkbox"><i></i> Option one</label>
          <label class="ui-checkbox d-block"><input type="checkbox" checked><i></i> Option two checked</label>
          <label class="ui-checkbox d-block"><input type="checkbox" checked disabled><i></i> Option two checked + disabled</label>
          <label class="ui-checkbox d-block"><input type="checkbox" disabled><i></i> Option four disabled</label>
          <label class="ui-radio d-block"><input type="radio" name="test1"><i></i> Option one</label>
          <label class="ui-radio d-block"><input type="radio" name="test1" checked><i></i> Option two checked</label>
          <label class="ui-radio d-block"><input type="radio" disabled checked><i></i> Option three checked and disabled</label>
          <label class="ui-radio d-block"><input type="radio" disabled><i></i> Option four disabled</label>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Material checkboxes & radios</label>
        <div class="col-sm-10">
          <label class="md-checkbox d-block mb-2"><input type="checkbox"><i class="bg-primary"></i> Option one</label>
          <label class="md-checkbox d-block mb-2"><input type="checkbox" checked><i class="bg-primary"></i> Option two checked</label>
          <label class="md-checkbox d-block mb-2"><input type="checkbox" checked disabled><i class="bg-primary"></i> Option two checked + disabled</label>
          <label class="md-checkbox d-block mb-2"><input type="checkbox" disabled><i class="bg-primary"></i> Option two disabled</label>
          <label class="md-checkbox d-block mb-2"><input type="radio" name="asss"><i class="bg-primary"></i> Option one</label>
          <label class="md-checkbox d-block mb-2"><input type="radio" name="asss" checked><i class="bg-primary"></i> Option checked</label>
          <label class="md-checkbox d-block mb-2"><input type="radio" checked disabled><i class="bg-primary"></i> Option disabled checked + checked</label>
          <label class="md-checkbox d-block mb-2"><input type="radio" disabled><i class="bg-primary"></i> Option disabled</label>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Inline checkboxes</label>
        <div class="col-sm-10">
          <label class="ui-checkbox"><input type="checkbox" checked><i></i> a</label>
          <label class="ui-checkbox"><input type="checkbox"><i></i> b</label>
          <label class="ui-checkbox"><input type="checkbox"><i></i> c</label>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Inline material checkboxes</label>
        <div class="col-sm-10">
          <label class="md-checkbox"><input type="checkbox" checked><i class="bg-primary"></i> A</label>
          <label class="md-checkbox"><input type="checkbox"><i class="bg-primary"></i> B</label>
          <label class="md-checkbox"><input type="checkbox"><i class="bg-primary"></i> C</label>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Switch</label>
        <div class="col-sm-10">
          <div class="mb-2">
            <label class="ui-switch ui-switch-sm"><input type="checkbox" checked><i></i></label>
            <label class="ui-switch"><input type="checkbox" checked><i></i></label>
            <label class="ui-switch ui-switch-lg"><input type="checkbox" checked><i></i></label>
          </div>
          <div class="mb-2">
            <label class="ui-switch ui-switch-sm bg-warning"><input type="checkbox" checked><i></i></label>
            <label class="ui-switch bg-warning"><input type="checkbox" checked><i></i></label>
            <label class="ui-switch ui-switch-lg bg-warning"><input type="checkbox" checked><i></i></label>
          </div>
          <div>
            <label class="ui-switch ui-switch-sm bg-primary"><input type="checkbox" checked><i></i></label>
            <label class="ui-switch bg-primary"><input type="checkbox" checked><i></i></label>
            <label class="ui-switch ui-switch-lg bg-primary"><input type="checkbox" checked><i></i></label>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Material switch</label>
        <div class="col-sm-10">
          <div class="mb-2">
            <label class="md-switch"><input type="checkbox" checked><i class="bg-primary"></i></label>
            <label class="md-switch"><input type="checkbox" checked><i class="bg-success"></i></label>
            <label class="md-switch"><input type="checkbox" checked><i class="bg-warning"></i></label>
          </div>
          <div class="mb-2">
            <label class="md-switch"><input type="checkbox"><i class="bg-primary"></i></label>
            <label class="md-switch"><input type="checkbox"><i class="bg-success"></i></label>
            <label class="md-switch"><input type="checkbox"><i class="bg-warning"></i></label>
          </div>
          <div class="mb-2">
            <label class="md-switch"><input type="checkbox" disabled><i class="bg-primary"></i></label>
            <label class="md-switch"><input type="checkbox" checked disabled><i class="bg-primary"></i></label>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Select</label>
        <div class="col-sm-10">
          <select name="account" class="form-control mb-2">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
          </select>
          <div>
            <select multiple class="form-control mb-2">
              <option>option 1</option>
              <option>option 2</option>
              <option>option 3</option>
              <option>option 4</option>
            </select>
          </div>
          <select name="account" class="form-control form-control-line">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
          </select>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group has-success row">
        <label class="col-sm-2 col-form-label">Input with success</label>
        <div class="col-sm-10">
          <input class="form-control">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group has-warning row">
        <label class="col-sm-2 col-form-label">Input with warning</label>
        <div class="col-sm-10">
          <input class="form-control">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group has-danger row">
        <label class="col-sm-2 col-form-label">Input with error</label>
        <div class="col-sm-10">
          <input class="form-control">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Control sizing</label>
        <div class="col-sm-10">
          <input class="form-control form-control-lg mb-2" placeholder=".form-control-lg">
          <input class="form-control mb-2" placeholder="Default input">
          <input class="form-control form-control-sm" placeholder=".form-control-sm">
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Column sizing</label>
        <div class="col-sm-10">
          <div class="row">
            <div class="col-md-2">
              <input class="form-control" placeholder=".col-md-2">
            </div>
            <div class="col-md-3">
              <input class="form-control" placeholder=".col-md-3">
            </div>
            <div class="col-md-4">
              <input class="form-control" placeholder=".col-md-4">
            </div>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Input groups</label>
        <div class="col-sm-10">
          <div class="input-group mb-2">
            <span class="input-group-addon">@</span>
            <input class="form-control" placeholder="name">
          </div>
          <div class="input-group mb-2">
            <input class="form-control">
            <span class="input-group-addon">.00</span>
          </div>
          <div class="input-group mb-2">
            <span class="input-group-addon">$</span>
            <input class="form-control">
            <span class="input-group-addon">.00</span>
          </div>
          <div class="input-group mb-2">
            <span class="input-group-addon"><input type="checkbox"></span>
            <input class="form-control">
          </div>
          <div class="input-group">
            <span class="input-group-addon"><input type="radio"></span>
            <input class="form-control">
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Button addons</label>
        <div class="col-sm-10">
          <div class="input-group mb-2">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
            <input class="form-control">
          </div>
          <div class="input-group">
            <input class="form-control">
            <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">With dropdowns</label>
        <div class="col-sm-10">
          <div class="input-group mb-2">
            <div class="input-group-btn dropdown">
              <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action<span class="caret"></span></button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href>Action</a>
                <a class="dropdown-item">Another action</a>
                <a class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Separated link</a>
              </div>
            </div>
            <input class="form-control">
          </div>
          <div class="input-group">
            <input class="form-control">
            <div class="input-group-btn dropdown">
              <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href>Action</a>
                <a class="dropdown-item">Another action</a>
                <a class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Separated link</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Segmented</label>
        <div class="col-sm-10">
          <div class="input-group mb-2">
            <div class="input-group-btn dropdown">
              <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
              <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href>Action</a>
                <a class="dropdown-item">Another action</a>
                <a class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Separated link</a>
              </div>
            </div>
            <input class="form-control">
          </div>
          <div class="input-group">
            <input class="form-control">
            <div class="input-group-btn dropdown">
              <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
              <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href>Action</a>
                <a class="dropdown-item">Another action</a>
                <a class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Separated link</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Button radio</label>
        <div class="col-sm-10">
          <div class="btn-group m-r">
            <label class="btn btn-secondary">Left</label>
            <label class="btn btn-secondary">Middle</label>
            <label class="btn btn-secondary">Right</label>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Button checkbox</label>
        <div class="col-sm-10">
          <div class="btn-group">
            <label class="btn btn-secondary">Left</label>
            <label class="btn btn-secondary">Middle</label>
            <label class="btn btn-secondary">Right</label>
          </div>
        </div>
      </div>
      <div class="sep sep-dashed row-fix"></div>
      <div class="form-group row">
        <div class="col-sm-4 col-sm-offset-2">
          <button type="submit" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>
